<template>
  <van-popup
    v-model:show="props.toolShow"
    round
    position="bottom"
 
    :style="{ height: '30%' }"
    @click="closeTool"
  >
    <div class="border">
      <div @click="measureMap('LineString')">
        <i class="iconfont icon-distance" style="color: #6ca4ea"></i
        ><span>测量距离</span>
      </div>
      <div @click="measureMap('Polygon')">
        <i class="iconfont icon-area" style="color: orange"></i
        ><span>测量面积</span>
      </div>
      <div @click="exportPdf">
        <i class="iconfont icon-pdf" style="color: red"></i><span>导出PDF</span>
      </div>
      <div @click="closeMeasure">
        <i class="iconfont icon-close" style="color: red"></i
        ><span>关闭测量</span>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
//导入hook
import { useToolsBox } from "./hooks/useToolsBox"
const { measureMap, closeMeasure, exportPdf } = useToolsBox()
const props = defineProps(["toolShow"])
const emit = defineEmits(["close-tool"])
function closeTool() {
  emit("close-tool")
}
</script>
<style lang="stylus" scoped>
@import "http://at.alicdn.com/t/c/font_3789415_3cphv28xpk5.css";
.border
  width 100%
  text-align center
  font-size 20px
  color #333
  margin 25px auto
  div
    padding 0 0 10px 0
    &:hover
      background-color #eee
  .iconfont
    font-size 20px
    padding-right 15px
</style>
